آموزش تسلط بر CSS - نسخه دوم [ویدئو]

سرفصل ها و درس ها

مبانی CSS CSS Foundations

• بررسی اجمالی دوره The Course Overview

• آناتومی یک مجموعه قوانین و سه نوع شیت The Anatomy of a Rule Set and the Three Types of Style Sheets

• مدل جعبه و بلوک در مقابل عناصر درون خطی The Box Model and Block versus Inline Elements

سربالایی Ramping Up

• ویرایشگرهای متن Text Editors

• CSS Reset CSS Reset

• Chrome Dev Tools Chrome Dev Tools

• تغییر نام عناصر: کلاس ها و شناسه ها Renaming Elements: Classes and IDs

• انتخاب کنندگان نسل Descendant Selectors

ایجاد طرح بندی صفحه با Floats Creating a Page Layout with Floats

• Floats Introduction – جریان متن در اطراف تصاویر Floats Introduction – Flowing Text around Images

• ایجاد یک طرح چند ستونی Creating a Multicolumn Layout

• حل مشکلات شناورها Solving the Problems of Floats

ایجاد دکمه با CSS مدولار Creating Buttons with Modular CSS

• ایجاد دکمه با CSS مدولار Creating Buttons with Modular CSS

• کلاس های چندگانه Multiple Classes

• قوانین خاص Specificity Rules

• انتقال ها Transitions

• تبدیل می کند Transforms

• طراحی یک دکمه Call to Action Styling a Call to Action button

• گرادیان ها Gradients

ایجاد ناوبری اصلی Creating the Main Navigation

• شروع ناوبری Starting the Navigation

• استفاده از کلاس های شبه Using Pseudo Classes

• موقعیت یابی مطلق Absolute Positioning

• ساخت Dropdown Building the Dropdown

• انیمیشن های CSS CSS Animations

• انیمیشن های CSS (ادامه) CSS Animations (Continued)

• تکمیل ناوبری Finalizing the Navigation

پاسخگو شدن Becoming Responsive

• شبکه سیال Fluid Grid

• تصاویر انعطاف پذیر Flexible Images

• داستان های رسانه Media Queries

• منوی موبایل Mobile Menu

• متا تگ Viewport Viewport Meta Tag

فونت های وب Web Fonts

• ویژگی @font-face The @font-face Property

• کیت فونت و خدمات فونت Font Kits and Font Services

• فونت های وب گوگل Google Web Fonts

• اشتراک فونت Foundries Subscription Font Foundries

• فونت های نماد Icon Fonts

گردش کار برای دستگاه های HiDPI The Workflow for HiDPI Devices

• 2x تصاویر 2x Images

• رویکرد جاوا اسکریپت The JavaScript Approach

• تصاویر 1.5x 1.5x images

• تصاویر پس زمینه Background Images

• SVG SVG

• Srcset Srcset

فلکس باکس Flexbox

• آشنایی با فلکس باکس Introduction to Flexbox

• از Floats تا Flexbox From Floats to Flexbox

• درک flex-grow، flex-shrink، flex-basis و flex Understanding flex-grow, flex-shrink, flex-basis, and flex

• چیدمان بیشتر، موقعیت یابی بیشتر More Layout, More Positioning

• ساخت فهرست محصولات Building the Product Listing

• انعطاف پذیری و تراز کردن محتوا flex-wrap and align-content

• تغییر ترتیب نمایش محتوا Changing the Display Order of Content

• پیشوندهای فروشنده Vendor Prefixes

بسته بندی Wrapping Up

• مراحل بعدی Next Steps

• نتیجه گیری و پیوندها Conclusion and Links